<template>
    <div class="FreightPage">
        <el-button class="btn" type="primary" @click="openDialog('add')">新增模板</el-button>

        <el-table
            :data="tableList"
            stripe
            style="width: 100%">
            <el-table-column
                prop="templateType"
                label="模板类型">
            </el-table-column>
            <el-table-column
                prop="transportType"
                label="运送类型">
            </el-table-column>
            <el-table-column
                prop="associatedCityList"
                label="关联城市">
                <template v-slot="scope">
                    {{ scope.row.associatedCityList.join(' / ') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="firstWeight"
                label="首重">
            </el-table-column>
            <el-table-column
                prop="continuousWeight"
                label="续重">
            </el-table-column>
            <el-table-column
                prop="lightThrowingCoefficient"
                label="轻抛系数">
            </el-table-column>
            <el-table-column
                width="120"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="openDialog('view', scope)" type="text" size="small">查看</el-button>
                    <el-button @click="openDialog('edit', scope)" type="text" size="small">编辑</el-button>
                    <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            :title="dialogTitle"
            :visible.sync="showDialog"
            width="500px"
            :before-close="close">

            <el-form
                :disabled="dialogType === 2"
                :model="form"
                ref="form"
                label-width="80px"
                :rules="rules">
                <el-form-item prop="templateType" label="模板类型">
                    <el-select v-model="form.templateType" placeholder="请选择" @change="form.associatedCityList = []">
                        <el-option
                            v-for="item in templateTypeMap"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="transportType" label="运送类型">
                    <el-select v-model="form.transportType" placeholder="请选择">
                        <el-option
                            v-for="item in transportTypeMap"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="associatedCityList" label="关联城市">
                    <el-checkbox-group v-model="form.associatedCityList">
                        <span v-if="form.templateType !== 3">
                            <el-checkbox :label="associatedCityMap[0].value">{{ associatedCityMap[0].label }}</el-checkbox>
                        </span>
                        <span v-else>
                            <el-checkbox :label="associatedCityMap[1].value">{{ associatedCityMap[1].label }}</el-checkbox>
                            <el-checkbox :label="associatedCityMap[2].value">{{ associatedCityMap[2].label }}</el-checkbox>
                            <el-checkbox :label="associatedCityMap[3].value">{{ associatedCityMap[3].label }}</el-checkbox>
                            <el-checkbox :label="associatedCityMap[4].value">{{ associatedCityMap[4].label }}</el-checkbox>
                        </span>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item prop="firstWeight" label="首重价格">
                    <el-input v-model="form.firstWeight"/>
                </el-form-item>
                <el-form-item prop="continuousWeight" label="续重价格">
                    <el-input v-model="form.continuousWeight"/>
                </el-form-item>
                <el-form-item prop="lightThrowingCoefficient" label="轻抛系数">
                    <el-input v-model="form.lightThrowingCoefficient"/>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer" v-if="dialogType !== 2">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getTemplate, addTemplate, delTemplate } from '@/api/data-management'

export default {
    name: 'FreightPage',
    created () {
        this.render()
    },
    mounted () {
        this.$store.commit('setPageLoading', false)
    },
    data () {
        return {
            showDialog: false,
            dialogTitle: '',
            dialogType: '',
            form: { associatedCityList: [] },
            originTableList: [],
            tableList: [],
            transportTypeMap: [
                { value: 1, label: '普快' },
                { value: 2, label: '特快' }
            ],
            associatedCityMap: [
                { value: 1, label: '全国' },
                { value: 2, label: '京津冀' },
                { value: 3, label: '江浙沪' },
                { value: 4, label: '川渝' },
                { value: 5, label: '黑吉辽' }
            ],
            templateTypeMap: [
                { value: 1, label: '同城寄' },
                { value: 2, label: '省内寄' },
                { value: 3, label: '经济区互寄' },
                { value: 4, label: '跨省' }
            ],
            rules: {
                templateType: [
                    { required: true, message: '不可为空', trigger: 'blur' }
                ],
                transportType: [
                    { required: true, message: '不可为空', trigger: 'blur' }
                ],
                associatedCityList: [
                    { required: true, message: '不可为空', trigger: 'change', type: 'array' }
                ],
                firstWeight: [
                    { required: true, message: '不可为空', trigger: 'blur' }
                ],
                continuousWeight: [
                    { required: true, message: '不可为空', trigger: 'blur' }
                ],
                lightThrowingCoefficient: [
                    { required: true, message: '不可为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        async render () {
            const res = await getTemplate()
            this.originTableList = res.data.data
            this.tableList = res.data.data.map(e => {
                return {
                    ...e,
                    templateType: this.templateTypeMap.find(item => item.value === e.templateType).label,
                    transportType: this.transportTypeMap.find(item => item.value === e.transportType).label,
                    associatedCityList: e.associatedCityList.map(item => {
                        return this.associatedCityMap.find(el => {
                            if (!(+item)) this.del(e.id)
                            return el.value === +item
                        }).label
                    })
                }
            })
        },
        openDialog (type, scope) {
            if (type === 'add') {
                this.dialogTitle = '新增模板'
                this.dialogType = 1
            } else if (type === 'view') {
                this.dialogTitle = '查看详情'
                this.dialogType = 2
                let obj = JSON.parse(JSON.stringify(this.originTableList[scope.$index]))
                obj.associatedCityList = obj.associatedCityList.map(e => +e)
                this.form = obj
            } else {
                this.dialogTitle = '编辑模板'
                this.dialogType = 3
                let obj = JSON.parse(JSON.stringify(this.originTableList[scope.$index]))
                obj.associatedCityList = obj.associatedCityList.map(e => +e)
                this.form = obj
            }
            this.showDialog = true
        },
        close () {
            this.showDialog = false
            this.form = { associatedCityList: [] }
            this.$refs.form.resetFields()
        },
        submit () {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    const res = await addTemplate(this.form)
                    if (res.data.msg === 'ok') {
                        this.dialogType === 1 ? this.$message.success('新增成功') : this.$message.success('修改成功')
                        this.close()
                        await this.render()
                    }
                }
            })
        },
        async del (id) {
            const res = await delTemplate(id)
            if (res.data.msg === 'ok') {
                this.$message.success('删除成功')
                this.showDialog = false
                await this.render()
            }
        }
    }
}
</script>

<style scoped lang="scss">
.FreightPage {
    background-color: white;
    border-radius: 5px;
    color: #2A2929;
    margin: 12px;
    padding: 24px;

    .btn {
        width: 100px;
        height: 40px;
        font-size: 14px;
        background: #E15536;
        color: white;
        margin-bottom: 24px;

        &:hover {
            background-color: #FF7C5F;
        }
    }

    ::v-deep .el-table {
        border-top: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
        border-right: 1px solid #EBEEF5;

        thead tr {
            th {
                background-color: #F8FAFF;
            }

            th:nth-of-type(7) {
                text-align: center;
            }
        }
    }

    ::v-deep .el-dialog {
        border-radius: 8px;

        .el-dialog__header {
            padding: 16px 24px;
            background-color: #F3F4F7;
            border-radius: 8px 8px 0 0;
        }

        .el-dialog__body {
            padding: 24px;

            .el-select {
                width: 100%;
            }

            .el-checkbox-group {
                height: 40px;
            }
        }

        .el-dialog__footer {
            padding: 0 24px 24px 24px;
            text-align: center;
        }
    }
}
</style>
